<script type="text/javascript">
  function isWeiXin(){
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
    }else{
        return false;
    }
  }
  function getQueryString(name){
      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if(r!=null)return  unescape(r[2]); return null;
  }

  function getCookie(name){
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
    return unescape(arr[2]);
    else
    return null;
  }

  function gotoAuth(){
      var hrefWithoutHash = location.href.split('#')[0];
      location.replace("http://cas.winnovator.cn/auth/preAuth?appId=1783791821429760&redirect=" + hrefWithoutHash);
  }

  var ssoToken = getCookie("SSO-TOKEN");
  if(!ssoToken){
      gotoAuth();
  }

  var AppStorage = new function() {

      this.setValueInLocalStorage = function(t, a) {
          localStorage.setItem(t, a)
      }
      ,
      this.getValueInLocalStorage = function(t) {
          return localStorage.getItem(t)
      }
      ,
      this.removeValueInLocalStorage = function(t) {
          localStorage.removeItem(t)
      }
  }
</script>


<!doctype html>
<html lang=zh-cmn-Hans>

  <head>
    <meta http-equiv=Content-Type content="text/html; charset=UTF-8">
    <title>
      儿童感恩特质测试
    </title>
    <meta content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1"
    name=viewport>
    <meta content="IE=edge,chrome=1" http-equiv=X-UA-Compatible>
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta http-equiv=Cache-Control content="no-cache, no-store, must-revalidate">
    <meta http-equiv=Pragma content=no-cache>
    <meta http-equiv=Expires content=0>
    <meta http-equiv=cache-control content="max-age=0">
    <meta http-equiv=expires content="Tue, 01 Jan 1980 1:00:00 GMT">
    <meta name=apple-mobile-web-app-status-bar-style content=black>
    <link rel="shortcut icon" href=http://img.yoparent.com/wp-content/uploads/2015/07/favicon.png>
    <link rel=stylesheet href=styles/main23.css>
    <link type=text/css rel=stylesheet href=scripts/test/success.css>
    <script src=scripts/vendor22.js>
    </script>
    <script type=text/javascript src=scripts/jquery-ui.min.js>
    </script>
    <script type=text/javascript src=scripts/test/dragslider23.js>
    </script>
    <script type=text/javascript src=scripts/test/jquery.ui.touch-punch.min.js>
    </script>
    <!--
    <script type=text/javascript src=scripts/test/dragslider.js>
    </script>
    -->
    <style>
      .continue-btn-wrap{ width: 100%; height: 55px; bottom: 10px; } .questionCaption{
      font-weight: 900; color: #b2ed38; } #share{ background: url('http://7xi66y.com1.z0.glb.clouddn.com/scale/common/yoparent_weixin_logo.jpg?imageView2/0/w/35');
      background-repeat: no-repeat; background-position: 10px; padding-left:
      40px; } .my-page-wrapper{ height:100%; } .img-cover-title{ padding-top:10px;
      } .highLight{ color: #b2ed38 !important; } .unhighLight{ color: #acb0b9;
      } .masker{ position: absolute; background-color: #000; opacity: 0.4; width:
      100%; height: 100%; } .axisLabel{ font-size: 16px; }

      .axisBox .bar {
          width: 30px;
          height: 30px;
          left: 0;
          margin-left: -15px;
          position: absolute !important;
          margin-top: 10px;
      }
      .big-circle {
          width: 100%;
          height: 100%;
          background-color: #90b83d;
          position: absolute;
          top: -20px;
          border-radius: 50%;
      }

      .big-circle .small-circle {
          width: 14px;
          height: 14px;
          background-color: #FFF;
          position: absolute;
          top: 50%;
          margin-top: -7px;
          left: 50%;
          margin-left: -7px;
          border-radius: 50%;
      }
    </style>
    <script language=text/template id=result-tpl style=display:none;>
        <img src="<%=data.data.url%>" style="width: 100%;height: auto" />
        <!--<h2 style="text-align: center;"><%=data.data.title%></h2>-->
        <div>
          <%=data.data.desc%>
        </div>

    </script>
    <script language=text/template id=share-description-tpl style=display:none;>
      我的孩子 < %=data.data.title % >，感恩能带来幸福，让你的孩子也来试试吧！
    </script>
    <script language=text/template id=under-tpl style=display:none;>


      <div class="content-wrap full-page" id="content-wrap" attr-full-page>
        <ul class="content" id="content" attr-content>
          <li attr-page attr-cover>
            <div class="img-cover" img-src="<%=img_src%>"
                 img-width="<%=imgWidth%>"
                 img-height="<%=imgHeight%>"
                 cover-img>
              <img class="hide"/>
            </div>
            <h1 class="hide" cover-title><%=title%></h1>
            <div class="cover-wrapper" id="cover-wrapper" cover-wrapper>
              <ul class="desc cover-scroller hide" style="font-size: 16px;line-height: 25px;" id="cover-scroller" cover-desc>
                <li><div style="font-size: 20px;"><%=description%></div></li>
              </ul>
            </div>
            <div class="btn-wrap">
              <div class="btn bg-primary hide" id="start" cover-btn>开始测试</div>
            </div>
            <div class="power">powered&nbsp;by&nbsp;优儿学堂</div>
          </li>

          <%_.each(questions, function(oneQuestion,qIndex){%>
          <li class="page-content-wrapper" attr-page attr-main data-id="<%=oneQuestion.id%>">
            <div class="my-page-wrapper">
              <ul>
                <li>
                  <!--题目的头部-->
                  <div class="img-cover-title" style="font-size: 19px;margin-bottom: 20px;">
                      <span class="questionIndex"><%=qIndex+1%></span>/<%=questions.length%>. <span class="caption"><%=oneQuestion.caption%></span>
                    </div>
                  <!--添加遮罩层-->
                  <%if(oneQuestion.img_src instanceof Array){%>
                  <div class="img-cover hide" img-width="<%=oneQuestion.imgWidth%>" img-height="<%=oneQuestion.imgHeight%>"
                       main-img img-src="<%=oneQuestion.img_src[2]%>" />
                    <img src="<%=oneQuestion.img_src[0]%>" style="display: none; width:100%; height: 100%;" />
                    <img src="<%=oneQuestion.img_src[1]%>" style="display: none; width:100%; height: 100%;" />
                    <img src="<%=oneQuestion.img_src[2]%>" style="width:100%; height: 100%;" />
                    <img src="<%=oneQuestion.img_src[3]%>" style="display: none; width:100%; height: 100%;" />
                    <img src="<%=oneQuestion.img_src[4]%>" style="display: none; width:100%; height: 100%;" />
                  </div>
                  <%}else{%>
                  <div class="img-cover hide" img-width="<%=oneQuestion.imgWidth%>" img-height="<%=oneQuestion.imgHeight%>"
                       main-img img-src="<%=oneQuestion.img_src%>">
                    <span class="title-name" ></span>
                    <div class="masker"></div>
                  </div>
                  <%}%>
                  <!--题目的头部end-->

                  <!--滑块显示的题目选项-->
                  <div class="sliderBox" data-qid="<%=oneQuestion.id%>"
                  <%if(oneQuestion.img_src instanceof Array){%>
                  data-mul-img = "1"
                  <%}else{%>
                  data-mul-img = "0"
                  <%}%>

                       data-selectindex="2">

                    <div class="axisBox">
                      <ol class="range rangeTop"></ol>
                      <ol class="range rangeBottom"></ol>
                      <div class="bar ui-draggable ui-draggable-handle">
                          <div class="big-circle">
                            <div class="small-circle"></div>
                          </div>
                      </div>
                    </div>
                    <div class="axisLabel">
                      <div class="left"><%=oneQuestion.answers[0].caption%></div>
                      <div class="right"><%=oneQuestion.answers[4].caption%></div>
                    </div>
                  </div>
                  <!--滑块显示的题目选项 end-->

                  <!--题目的选项-->
                  <!--<%var answers = oneQuestion.answers%>-->
                  <!--<div class="answers-content-wrapper wrapper hide" answers-wrapper>-->
                    <!--&lt;!&ndash;题目&ndash;&gt;-->
                    <!--<div class="img-cover-title" style="font-size: 19px;">-->
                      <!--<span class="questionIndex"><%=qIndex+1%></span>/<%=questions.length%>. <span class="caption"><%=oneQuestion.caption%></span>-->
                    <!--</div>-->
                    <!--&lt;!&ndash;题目end&ndash;&gt;-->
                    <!--<ul class="answers scroller" id="answers" answers-num=<%=answers.length%> main-answers>-->
                      <!--<%_.each(answers, function(oneAnswer,aIndex){%>-->
                      <!--<li class="hr padding-tb" data-results='<%=JSON.stringify(oneAnswer.results)%>'-->
                          <!--answer-item disable="0" id="<%=oneAnswer.id%>" qid="<%=oneQuestion.id%>">-->
                        <!--<%=oneAnswer.caption%>-->
                      <!--</li>-->

                      <!--<%});%>-->
                    <!--</ul>-->
                  <!--</div>-->
                  <!--题目的选项 end-->

                  <br/>
                  <div class="continue-btn-wrap" style="z-index: 100; display:none;">
                    <%if(questions.length-1 !== qIndex){%>
                    <div class="btn bg-primary show animated lightSpeedIn continue highLight" disable="0" >继续</div>
                    <%}else{%>
                    <div class="btn bg-primary show animated lightSpeedIn continue highLight" disable="0" >查看结果</div>
                    <%}%>
                  </div>
                </li>
              </ul>

            </div>


          </li>
          <%});%>
          <li attr-page attr-result>
            <div class="cal-wrap">
              <div class="i-box-1 circle animated scaleCirl infinite">

              </div>
              <div class="i-box-2 circle animated scaleCirr infinite">

              </div>
              <div class="text">正在计算结果...</div>
            </div>
            <div class="power">powered&nbsp;by&nbsp;优儿学堂</div>
          </li>
        </ul>
      </div>

    </script>
    <script src="scripts/data/data23.js?t=99">
    </script>
    <script src="scripts/main23.js?v=55">
    </script>
    <script>
        var paperId = "view23";
        window.eventLogger = {

            log: function(category, action, label){
                category = paperId + "_" + category;
                action = paperId + "_" + action;
                label = paperId + "_" + label;

                try {
                    _hmt.push(["_trackEvent", category, action, label, 0])
                } catch (e) {}

                $.get("http://logger.yoparent.cn/log.html?category=" + category + "&action=" + action + "&label=" + label + "&token=" + AppStorage.getValueInLocalStorage("scale-token"));
            }
        }
    </script>
  </head>

  <body>
    <!--[if lt IE 10]>
      <p class="browserupgrade">
        You are using an
        <strong>
          outdated
        </strong>
        browser. Please
        <a href="http://browsehappy.com/">
          upgrade your browser
        </a>
        to improve your experience.
      </p>
    <![endif]-->
    <div class=container id=container>
    </div>
    <div class="ending full-page hide">
      <div class=mesg>
        让朋友们也来试试！
        <div class="share icon-redo2">
        </div>
      </div>
    </div>
    <div class="orientation full-page hide">
      <div class=orientation-wrap>
        <div class="loading icon-spinner">
        </div>
        <div class=mesg>
          请使用竖屏浏览，体验绝佳！
        </div>
      </div>
    </div>
    <div class="full-page result-box hide">
      <div class=result-wrapper id=result-wrapper result-wrapper>
        <ul class=desc id=result-scroller>
          <li>
            <div class=result-img result-img>
              <span class=title>
              </span>
            </div>
          </li>
          <li result-desc>
          </li>
          <li class=result-expert>
            <br>
            <span style="font-size: 14px;">
              更多测试请关注
            </span>
            <div style="text-align: center">
              <img src="http://static.winnovator.cn/scale/985747410.jpg" style="width: auto; height: 150px;">
            </div>
          </li>
          <li>
          </li>
        </ul>
      </div>
      <div class=btn-wrap result-btn>
        <div class="btn bg-primary" id=share>
          晒结果
        </div>
      </div>
      <div class=power_result>
        <div class=text>
          powered&nbsp;by&nbsp;优儿学堂
        </div>
        <div class=text>
          ©版权所有&nbsp;&nbsp;侵权必究
        </div>
      </div>
    </div>
    <script type=text/template id=quiz-data style=display:none;>
    </script>
    <script type=text/javascript>
      var yoparent_token = "1xzqkxz377o5596qmbjwlkvsl";
      var yoparent_start_time = "1436603587600";
    </script>
    <script type=text/javascript>
      var data_tpl = null;
      var resultUrl = "http://123.59.44.69:7070/yoparent/scale/result";
      //      var resultUrl = "http://localhost:8085/yoparent/scale/result";
      WeittQuiz.run(data_tpl, "#container", "#under-tpl", {
        nextPageTime: 500,
        bgImg: "",
        coverDesc: {
          duration: 900,
          animate: "zoomIn"
        },
        mainCoverImg: {
          duration: 0,
          animate: "zoomIn"
        },
        mainAnswers: {
          duration: 650,
          animate: "fadeInUp"
        },
        nextPageWaitingTime: 500
      });

    //   console.log(window.innerHeight);
      $('.continue-btn-wrap').css('top', window.innerHeight - 100 + 'px').css('position', 'absolute');

      var quizId = 23;
      $.ajax({
        type: 'get',
        url: 'http://123.59.44.69:7070/yoparent/scale/initData?quizId=' + quizId + '&url=' + encodeURIComponent(location.href.split('#')[0]) + '&r=' + Math.random(),
        success: function(data) {
          var configData = eval('(' + data + ')');
          sysconfig(configData);
          wxconfig(configData);
        }
      });
      function sysconfig(data){
          var _token = AppStorage.getValueInLocalStorage("scale-token");
          if(!_token){
              AppStorage.setValueInLocalStorage("scale-token", data.token);
          }
          window.yoparent_token = data.token;
          window.yoparent_start_time = parseInt(data.startTime);
      }

      function wxconfig(data){
          wx.config({
              debug: false,
              appId: data.singatureParm.appId,
              timestamp: parseInt(data.singatureParm.timestamp),
              nonceStr: data.singatureParm.nonceStr,
              signature: data.singatureParm.signature,
              jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ"]
          });

          wx.ready(function(){
              wx.checkJsApi({
                  jsApiList: ['chooseImage'],
                  success: function(res) {}
              });
              wx.onMenuShareTimeline({
                  title: '儿童感恩特质测试',
                  link: 'http://scale.yoparent.cn/view23.html',
                  imgUrl: 'http://static.winnovator.cn/scale/23/face.jpg',
                  success: function () {
                      eventLogger && eventLogger.log("timeline_success", "share", "timeline");
                  },
                  cancel: function () {
                      eventLogger && eventLogger.log("timeline_cancel", "share", "timeline");
                  }
              });

              wx.onMenuShareAppMessage({
                  title: '儿童感恩特质测试',
                  desc: '感恩也是哈佛大学推荐的20种获得幸福的方法之一哦~会感恩的孩子能给孩子自己和整个家庭带来更多的幸福！你的孩子会感恩吗？试试下面这个测试吧！（适用年龄范围：3-12岁）~~',
                  link: 'http://scale.yoparent.cn/view23.html',
                  imgUrl: 'http://static.winnovator.cn/scale/23/face.jpg',
                  type: 'link',
                  dataUrl: '',
                  success: function () {
                      eventLogger && eventLogger.log("group_success", "share", "group");
                  },
                  cancel: function () {
                      eventLogger && eventLogger.log("group_cancel", "share", "group");
                  }
              });
          });
      }

    </script>
    <script type=text/javascript src=http://res.wx.qq.com/open/js/jweixin-1.0.0.js>
    </script>

    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?061e31ddbdbd77c0403205c71bf52730";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
  </body>

</html>
